import React, { useEffect, useState } from 'react';
import UserList from './components/userList';
import SearchDom from '@src/components/Search';
import EditModal from './components/editModal';
import './users.styl'
import { userSelect, userUpdate, userDelete } from '@src/api/user'
import { message, Button } from 'antd';
import Query from '../../components/QueryTools';

function UserPage() {
  const [dataSource, setDataSource] = useState([])
  const [open, setOpen] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [rowData, setRowData] = useState({})
  const [searchData, setSearchData] = useState({})
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 100
  })
  const handleSetPagination = (pagination) => {
    setPagination(pagination)
  }

  const searchList = [
    {
      label: '用户名',
      key: 'user_name',
      type: 'input'
    },
    {
      label: '手机号',
      key: 'phone',
      type: 'input'
    }
  ]
  const submitSearch = (data) => {
    setSearchData(data)
  }
  useEffect(() => {
    getList()
  }, [searchData, pagination.current, pagination.pageSize])
  const delRow = async (row) => {
    await userDelete({ id: row.id })
    getList()
  }
  const getList = async () => {
    const res = await userSelect({ ...searchData, ...pagination })
    setDataSource(res.data.list || [])
    setPagination({ ...pagination, total: res.data.total })
  }
  const editSubmit = async (data) => {
    await userUpdate({
      id: data.id,
      phone: data.phone
    })
    message.success('修改成功')
    setOpen(false)
    getList()
  }


  const commit = (val) => {
    console.log('COMMIT', val);
  }
  const handleChange = (e, p, i) => {
    console.log(e, p, i);
  }

  // useEffect(() => {
  //   getList()
  // }, [])
  return (
    <>
      {/* <Query fields={fields} commit={commit} change={handleChange}></Query> */}
      <SearchDom searchList={searchList} submitSearch={submitSearch} />
      <UserList
        pagination={pagination}
        dataSource={dataSource}
        handleSetPagination={handleSetPagination}
        setOpen={setOpen}
        setRowData={setRowData}
        delRow={delRow} />
      <EditModal
        open={open}
        setOpen={setOpen}
        confirmLoading={confirmLoading}
        setConfirmLoading={setConfirmLoading}
        editSubmit={editSubmit}
        initialValues={rowData}
      />
    </>
  )
}

export default UserPage;